<template>
  <div class="about">
    <!-- 背景图 -->
    <div class="lsf_bg"></div>
    <!-- 搜索框 -->
    <div class="search-container">
      <h2 class="site-title">站点</h2>
      <div class="search-box">
        <div class="search-input" @click="gotosearch">
          <img
            src="https://mall.leyifan.com/static/h5/new_images/index_search.png"
            alt="搜索图标"
          />
          <p>输入关键词,商品ID或网址</p>
        </div>
      </div>
    </div>
    <!-- 分类列表 -->
    <div class="category-list">
      <ul style="padding-top: 33vw; padding-bottom: 50rem">
        <li
          v-for="(item, index) in fenleilist.slice(0, 11)"
          :key="index"
          class="category-item"
          @click="gotocategory(item.value)"
        >
          <span class="category-introduce">{{ item?.introduce }}</span>
          <img :src="imgs[index]" />
        </li>
        <li class="category-item" @click="gotohlfqueryr(fenleilist[11].value)">
          <span class="category-introduce">{{ fenleilist[11]?.introduce }}</span>
          <img src="https://mall.leyifan.com/static/h5/images/purchaseAgentSite.png" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from '@/api/axios'
import { useRouter } from 'vue-router'
const router = useRouter()
let fenleilist = ref([])
let imgs = ref([])
axios
  .get('https://api.mall.leyifan.com/api/front/index/siteList')
  .then((res) => {
    console.log('分类', res.data.data) // 检查返回的数据结构
    fenleilist.value = res.data.data
    imgs.value = fenleilist.value
    
      .map((o) => {
        const imagePath = o.SitePageImg
        console.log(imagePath);
        
        const numberMatch = imagePath.match(/\/(\d+)\.png$/)
        if (numberMatch && numberMatch[1]) {

          return `https://mall.leyifan.com/static/h5/site/${parseInt(numberMatch[1], 10)}.png`
          
        } else {
          // console.error('Invalid image path format for:', imagePath) 
          return 'https://mall.leyifan.com/static/h5/images/purchaseAgentSite.png' // 或者你可以选择返回一个默认值
        }
      })
      .filter((item) => item !== null)
      console.log(imgs.value,"zzz");
      // imgs.value = [...imgs.value,`https://mall.leyifan.com/static/h5/images/purchaseAgentSite.png`]
    
  })
  .catch((error) => {
    console.error('Error fetching data:', error)
  })

let gotocategory = (value) => {
  console.log(value);
  
  router.push({ path: '/category', query: { value } })
}
let gotohlfqueryr = (value) => {
  router.push({ path: '/hlfqueryr', query: { value } })
}
let gotosearch = () => {
  router.push({ path: '/search' })
}
</script>

<style lang="less" scoped>
@background-image-url: 'https://mall.leyifan.com/static/h5/new_images/common_bg.png';
@search-icon-url: 'https://mall.leyifan.com/static/h5/new_images/index_search.png';

.about {
  position: relative;

  .lsf_bg {
    position: fixed;
    z-index: 10;
    background-size: cover;
    width: 100vw;
    height: 30vw;
    background-image: url(@background-image-url);
  }

  .search-container {
    position: fixed;
    width: 100vw;
    height: 30vw;
    z-index: 11;

    .site-title {
      font-weight: 800;
      font-size: 17rem;
      width: 100vw;
      height: 42rem;
      line-height: 42rem;
      text-align: center;
    }

    .search-box {
      width: 100vw;
      padding: 0 14rem;
      margin-top: 10rem;

      .search-input {
        display: flex;
        align-items: center;
        color: #aaa;
        border-radius: 8rem;
        padding: 0 10rem;
        width: 100%;
        height: 42rem;
        background-color: rgba(51, 51, 51, 0.06);
        border: 0;

        img {
          display: inline;
          width: 22rem;
          height: 22rem;
        }

        p {
          display: inline;
          font-size: 14rem;
          margin-left: 8rem;
        }
      }
    }
  }

  .category-list {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      list-style-type: none;
      padding: 0;
      margin: 0;

      .category-item {
        margin-bottom: 6rem;
        position: relative;

        img {
          width: 168rem;
        }

        .category-introduce {
          color: white;
          position: absolute;
          top: 35%;
          left: 12%;
          font-size: 12rem;
        }
      }
    }
  }
}
</style>